<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="../../css/mui.min.css" rel="stylesheet" />
    <link href="../../css/style.css" rel="stylesheet" />
    <style type="text/css" media="all">
      .head-img {
        width: 40px;
        height: 40px;
      }
    </style>
  </head>

  <body>
    <header class="mui-bar mui-bar-nav">
      <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
      <h1 class="mui-center mui-title">{{entry.name||'New'}}</h1>
      <a class="mui-icon mui-icon-checkmarkempty mui-pull-right" v-on="tap:save()"></a>
    </header>
    <div class="mui-content">
      <div class="mui-table-view mui-grid-view">
        <div class="mui-table-view-cell mui-media mui-col-xs-3">
          <img id="head-img" style="height: 80px; width: 80px;" v-on="tap: setImg" src="../../images/apps/cbd.jpg" />
        </div>
        <div class="mui-table-view-cell mui-media mui-col-xs-9 mui-input-group">
          <div class="mui-input-row">
            <label>name:</label>
            <input v-model='item.name' type="text" class="mui-input-clear mui-input" placeholder="">
          </div>
          <div class="mui-input-row">
            <label>phone:</label>
            <input v-model='item.price' type="number" class="mui-input-clear mui-input" placeholder="">
          </div>
          <div class="mui-input-row">
            <label>qq:</label>
            <input v-model='item.qty' type="number" class="mui-input-clear mui-input" placeholder="">
          </div>
        </div>
      </div>
      <ul class="mui-table-view">
        <li class="mui-table-view-cell mui-collapse">
          <a class="mui-navigate-right" href="#">基本信息</a>
          <div class="mui-collapse-content">
            <form class="mui-input-group">
              <div class="mui-input-row">
                <label>手机</label>
                <input type="number" placeholder="手机" </div>
                <div class="mui-input-row">
                  <label>地址</label>
                  <input type="text" class="mui-input-clear" placeholder="带清除按钮的输入框">
                </div>
            </form>
            </div>
        </li>
        <li class="mui-table-view-cell mui-collapse">
          <a class="mui-navigate-right" href="#">业务信息</a>
          <div class="mui-collapse-content">
            <p>订单总量</p>
          </div>
        </li>
      </ul>

      </div>
      <script src="../../js/mui.js"></script>
      <script src="../../js/vue.min.js"></script>
      <script src="../../app/vue-html5.js"></script>
      <script type="text/javascript" charset="utf-8">
        function getImage() {
          var c = plus.camera.getCamera();
          c.captureImage(function(e) {
            plus.io.resolveLocalFileSystemURL(e, function(entry) {
              var s = entry.toLocalURL() + "?version=" + new Date().getTime();
              console.log(s);
              document.getElementById("head-img").src = s;
              //变更大图预览的src
              //目前仅有一张图片，暂时如此处理，后续需要通过标准组件实现
              document.querySelector("#__mui-imageview__group .mui-slider-item img").src = s + "?version=" + new Date().getTime();;;
            }, function(e) {
              console.log("读取拍照文件错误：" + e.message);
            });
          }, function(s) {
            console.log("error" + s);
          }, {
            filename: "_doc/head.jpg"
          })
        }

        function defaultImg() {
          plus.io.resolveLocalFileSystemURL("_doc/head.jpg", function(entry) {
            var s = entry.fullPath + "?version=" + new Date().getTime();;
            document.getElementById("head-img").src = s;
          }, function(e) {
            document.getElementById("head-img").src = '../images/logo.png';
          })
        }

        function galleryImg() {
            plus.gallery.pick(function(a) {
              plus.io.resolveLocalFileSystemURL(a, function(entry) {
                plus.io.resolveLocalFileSystemURL("_doc/", function(root) {
                  root.getFile("head.jpg", {}, function(file) {
                    //文件已存在
                    file.remove(function() {
                      console.log("file remove success");
                      entry.copyTo(root, 'head.jpg', function(e) {
                          var e = e.fullPath + "?version=" + new Date().getTime();
                          document.getElementById("head-img").src = e;
                          document.getElementById("head-img1").src = e;
                          //变更大图预览的src
                          //目前仅有一张图片，暂时如此处理，后续需要通过标准组件实现
                          document.querySelector("#__mui-imageview__group .mui-slider-item img").src = e + "?version=" + new Date().getTime();;
                        },
                        function(e) {
                          console.log('copy image fail:' + e.message);
                        });
                    }, function() {
                      console.log("delete image fail:" + e.message);
                    });
                  }, function() {
                    //文件不存在
                    entry.copyTo(root, 'head.jpg', function(e) {
                        var path = e.fullPath + "?version=" + new Date().getTime();
                        document.getElementById("head-img").src = path;
                        document.getElementById("head-img1").src = path;
                        //变更大图预览的src
                        //目前仅有一张图片，暂时如此处理，后续需要通过标准组件实现
                        document.querySelector("#__mui-imageview__group .mui-slider-item img").src = path;
                      },
                      function(e) {
                        console.log('copy image fail:' + e.message);
                      });
                  });
                }, function(e) {
                  console.log("get _www folder fail");
                })
              }, function(e) {
                console.log("读取拍照文件错误：" + e.message);
              });
            }, function(a) {}, {
              filter: "image"
            })
          }
          (function($, window, document, Vue, vm) {
            window.vm = vm = new Vue.PageVm({
              el: 'body',
              name: 'page name',
              model: 'customers',
              events: {
                show: function(data) {
                  var self = this;
                  if (data.id) {
                    $.ajax(this.$options.entryUrl + data.id, {
                      timeout: 2000, //超时时间设置为10秒；
                      success: function(data) {
                        self.item = data;
                        self.$emit('loaded');
                      },
                      error: function(xhr, type, errorThrown) {
                        plus.nativeUI.alert('连接服务器异常')
                      }
                    });
                  } else {
                    self.order = this.$default();
                  }
                }
              },
              filters: {},
              methods: {
                setImg: function() {
                  var a = [{
                    title: "拍照"
                  }, {
                    title: "从手机相册选择"
                  }];
                  plus.nativeUI.actionSheet({
                    title: "修改头像",
                    cancel: "取消",
                    buttons: a
                  }, function(b) {
                    switch (b.index) {
                      case 0:
                        break;
                      case 1:
                        getImage();
                        break;
                      case 2:
                        galleryImg();
                        break;
                      default:
                        break
                    }
                  })
                },
                save: function() {
                  log('save:', JSON.stringify(this.item));
                },
              },
              mixins: [Vue.mixins.ajax, Vue.mixins.form]
            });
          })(mui, window, document, Vue, window.vm = {});
      </script>
  </body>

</html>